<template>
  <view class="show-lucky-cards">
    <!-- 黄色炫光 -->
    <view class="show-lucky-light" :hidden="!luckyLightStatus">
      <image
        class="lucky-light-img"
        :src="
          $IMG_URL + '/uploads/20230427/7352dfd0502fb091cb3424979df618d6.png'
        "
        binderror=""
        @load="onLightLoad"
      />
    </view>
    <!-- 卡片 -->
    <view class="lucky-card-result" @tap="hideLuckyCard">
      <series-list-item
        size="24"
        :item="details"
        :not-tag="false"
        :type="'5'"
        :not-price="false"
      ></series-list-item>
    </view>
    <!-- 点击按钮       :class="sequential.agian ? 'show' : ''"-->
    <view class="again-btn" hover-class="hover-bubble" @tap="hideLuckyCard">
      <image class="bg-again" :src="again_img" mode="widthFix" />
      <view class="text"> 开心收下 </view>
    </view>
  </view>
</template>
<script>
import again_img from '../img/all-1.png';
import SeriesListItem from './series-list-item.vue';
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: { SeriesListItem },
  props: {
    details: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      again_img,
      // 光芒加载
      luckyLightStatus: false,
    };
  },
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {},
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用

  mounted() {},
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {
    //光芒图片加载
    onLightLoad() {
      this.luckyLightStatus = true;
    },
    hideLuckyCard() {
      this.$emit('hide', false);
    },
  },
};
</script>
<style lang="scss" scoped>
view,
image {
  max-width: none;
}
.show-lucky-cards {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;

  .lucky-card-result {
    position: relative;
    z-index: 1;
    width: 240rpx;
    height: 300rpx;
    opacity: 0;
    animation: swirl-in-zoomin 1s linear 1.4s 1 normal forwards;
  }

  .show-lucky-light {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    opacity: 0;
    animation: fade 1s ease-in 1.4s 1 normal forwards;
    .lucky-light-img {
      position: absolute;
      top: calc(50% - 900rpx);
      left: calc(50% - 900rpx);
      width: 1800rpx;
      height: 1800rpx;
      opacity: 0.6;
      filter: brightness(150%);
      animation: rotate-light-1 16s linear 0s infinite normal;
    }
  }

  .streamers-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    animation: fade 1.2s linear 0s 1 normal none;
    .streamers-img {
      position: absolute;
      left: calc(50% - 375px);
      top: calc(50% - 667px);
      width: 750px;
      height: 1334px;
      animation: myAnimation 8s steps(1) 1;
    }
  }
}
.again-btn {
  position: absolute;
  bottom: 150rpx;
  left: calc(50% - 94rpx);
  width: 188rpx;
  height: 88rpx;
  opacity: 0;
  animation: fade 1s linear 2.5s 1 normal forwards;
  .bg-again {
    position: absolute;
    top: -3rpx;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .text {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    font-size: 32rpx;
    font-weight: 800;
    color: #ffffff;
  }
}
@keyframes swirl-in-zoomin {
  0% {
    transform: rotate(-540deg) scale(0);
    opacity: 0;
  }
  100% {
    transform: rotate(0) scale(1.4);
    opacity: 1;
  }
}
@keyframes rotate-light-1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
